<template>
	<view class="content">
		<navbar :appname="title" :icon="iconshow" v-show="flag" :colorBlack="true"></navbar>
		<view class="container" v-show="flag">
			<scroll-view scroll-y="true">
				<view class="search">
					<text class="iconfont icon-fangdajing"></text>
					<input type='text' :placeholder="tips" v-model="keyword" @confirm="handleToHistory(keyword)" @input="handleToSuggest"/>
					<text class="iconfont icon-guanbi" v-show="searchType!=1" @tap="handleToClearInput"></text>
				</view>
				
				<block v-if="searchType==1">
				<view class="history">
					<view class="history-head">
						<view>历史记录</view>
						<text class="iconfont icon-shanchu" @tap="handleToclear"></text>
					</view>
					<view class="history-words">
						<view v-for="(item,index) in historyWords" :key="index" @tap="handleToHistoryWord(item)">{{item}}</view>
					</view>
					<view class="search-hot">
						<view class="search-hot-head">热搜榜</view>
						<view class="search-hot-content" v-for="(item,index) in searchHot" :key="index" @tap="handleToHotSong(item.searchWord)">
							<view class="search-hot-number">{{index + 1}}</view>
							<view class="search-hot-words">
								<view>
									{{item.searchWord}}
									<image :src="item.iconUrl"></image>
								</view>
								<view>{{item.content}}</view>
							</view>
							<view class="search-hot-count">{{item.score}}</view>
						</view>
					</view>
				</view>
				</block>
				
				<block v-else-if="searchType==2">
				<view class="search-result">
					<view class="search-result-item" v-for="(item,index) in songSearchList" :key="index" @tap="handleToDetail(item.id)">
						<view>
							<view>{{item.name}}</view>
							<view>{{item.artists[0].name}} - {{item.name}}</view>
						</view>
						<text class="iconfont icon-bofang1"></text>
					</view>
				</view>
				</block>
				
				<block v-else>
				<view class="search-suggest">
					<view class="suggest-title">搜索“{{suggestWord}}”</view>
					<view class="suggest-item" v-for="(item,index) in suggestList" :key="index" @tap="handleToHotSong(item.keyword)">
						<text class="iconfont icon-fangdajing"></text>{{item.keyword}}
					</view>
				</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css';
	import navbar from '@/components/navbar/navbar.vue';
	import {searchHot,songKeywords,songSuggest} from '../../common/api.js'
	export default {
		components:{
			navbar
		},
		data() {
			return {
				iconshow:true,
				flag:true,
				title:"搜索",
				tips:'搜索歌曲',
				searchHot:[],
				keyword:'',
				historyWords:[],
				searchType:1,
				songSearchList:[],
				suggestWord:'',
				suggestList:[]
			}
		},
		onLoad() {
			searchHot().then((res)=>{
				if(res[1].data.code == '200'){
					this.searchHot = res[1].data.data
				}
			})
			
			try {
			    const value = uni.getStorageSync('historyKeyWords');
			    if (value) {
			        this.historyWords = value;
			    }
			} catch (e) {
			    // error
			}
			
		},
		methods: {
			handleToHotSong(keyword){
				this.handleToHistoryWord(keyword)
			},
			
			handleToHistory(keyword){
				this.historyWords.unshift(keyword)
				this.historyWords = [...new Set(this.historyWords)]
				if(this.historyWords.length > 10){
					this.historyWords.length =10
				}
				try {
				    uni.setStorageSync('historyKeyWords',this.historyWords );
				} catch (e) {
				    // error
				}
				this.handleToSearch(keyword)
			},
			
			handleToclear(){
				this.historyWords = []
				try {
				    uni.removeStorageSync('historyKeyWords');
				} catch (e) {
				    // error
				}
			},
			
			handleToClearInput(){
				this.keyword = ''
				this.searchType = 1
			},
			
			handleToSearch(keyword){
				songKeywords(keyword).then((res)=>{
					if(res[1].data.code){
						this.searchType = 2
						this.songSearchList = res[1].data.result.songs
						
					}
					
				})
			},
			
			handleToDetail(songId){
				uni.navigateTo({
					url: '../detail/detail?songId=' + songId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			handleToHistoryWord(word){
				this.keyword = word
				this.handleToHistory(word)
				
			},
			
			handleToSuggest(event){
				this.suggestWord = event.target.value
				if(!event.target.value){
					this.searchType = 1
					return
				}
				songSuggest(event.target.value).then((res)=>{
					if(res[1].data.code == '200'){
						this.suggestList = res[1].data.result.allMatch
						this.searchType = 3
						
					}
				})
				
			}
		}
	}
</script>

<style scoped>
	.search{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 70rpx 30rpx 50rpx 30rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
	}
	
	.search input{
		font-size: 26rpx;
		flex: 1;
	}
	
	.search text{
		font-size: 26rpx;
		margin: 0 26rpx;
	}
	
	.history{
		margin: 0 30rpx 50rpx 30rpx;
		font-size: 26rpx;
	}
	
	.history-head{
		display: flex;
		justify-content: space-between;
		margin-bottom: 36rpx;
	}
	
	.history-words{
		display: flex;
		flex-wrap: wrap;
	}
	
	.history-words view{
		padding: 16rpx 28rpx;
		border-radius: 40rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		background:#f7f7f7;
	}
	
	
	.search-hot{
		margin: 0 30rpx;
		font-size: 26rpx;
	} 
	
	.search-hot-head{
		margin-bottom: 36rpx;
	}  
	
	.search-hot-content{
		display: flex;
		margin-bottom: 58rpx;
		align-items: center;
	} 
	
	.search-hot-number{
		width: 60rpx;
		color: #bf2222;
		margin-left: 8rpx;
	} 
	
	.search-hot-words{
		flex: 1;
	}
	
	.search-hot-words view:nth-child(1){
		color: black;
		font-size: 30rpx;
		
	}
	
	.search-hot-words view:nth-child(2){
		font-size: 24rpx;
		color: #878787;
		width: 55vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.search-hot-words image{
		width: 36rpx;
		height: 22rpx;
	}
	
	.search-hot-count{
		color: #878787;
	}
	
	.search-result{
		border-top: 2rpx #e4e4e4 solid;
		padding: 30rpx;
		
	} 
	
	.search-result-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		border-bottom: 2rpx #e4e4e4 solid;
	}
	
	.search-result-item view:nth-child(1){
		font-size: 28rpx;
		color: #235790;
		margin-bottom: 12rpx;
	}
	
	.search-result-item view:nth-child(2){
		font-size: 22rpx;
		color: #898989;
	}
	
	.search-result-item text{
		font-size: 50rpx;
	}
	
	.search-suggest{
		border-top: 2rpx #e4e4e4 solid;
		padding: 30rpx;
		font-size: 26rpx;
	} 
	
	.suggest-title{
		color: #4574a5;
		margin-bottom: 74rpx;
	} 
	
	.suggest-item{
		color: #5d5d5d;
		margin-bottom: 74rpx;
	}
	
	.suggest-item text{
		color: #bdbdbd;
		position: relative;
		top:2rpx;
		margin-right: 28rpx;
	}
	
</style>
